#{extends 'main.html' /}
#{set title:'测试用首页' /}

#{wei_deng_lu}
	#{form @TestViewer.zhuCeYongHu(), id:'myform'}
	   <fieldset>
	   	  #{field 'yongHu.yongHuMing'}
	      <p>
	         <label>用户名 *</label>
	         <input type="text" name="${field.name}" value="${field.value}" required="required" minlength="2"/>
	      </p>
	      #{/field}
	      #{field 'yongHu.miMa'}
	      <p>
	         <label>登录密码 *</label>
	         <input type="password" name="${field.name}" required="required" minlength="6"/>
	      </p>
	      <p>
	         <label>再次输入密码 *</label>
	         <input type="password" name="jianChaMiMa" required="required" data-equals="${field.name}"/>
	      </p>
	      #{/field}
	      #{field 'yongHu.xingMing'}
		  <p>
	         <label>真实姓名 *</label>
	         <input type="text" name="${field.name}" value="${field.value}" required="required" minlength="2"/>
	      </p>
	      #{/field}
	      #{field 'yongHu.xingBie'}
	      <p>
	         <label>性别 *</label>
	         <select name="${field.name}" required="required" >
				<option value="true" #{if field.value==true}selected=selected#{/if}>男</option>
				<option value="false" #{if field.value==false}selected=selected#{/if}>女</option>
			</select>
		  </p> 
		  #{/field}
	      #{field 'yongHu.youXiang'}
	      <p>
	         <label>电子邮箱</label>
	         <input type="email" name="${field.name}" value="${field.value}" required="required" />
	      </p>
	      #{/field}
	      #{field 'yongHu.dianHua'}
	      <p>
	         <label>电话</label>
	         <input type="text" name="${field.name}" value="${field.value}"/>
	      </p>
	      #{/field}
	      #{field 'yongHu.qq'}
	      <p>
	         <label>QQ</label>
	         <input type="text" name="${field.name}" value="${field.value}"/>
	      </p>
	      #{/field}
	      #{field 'yongHu.msn'}
	      <p>
	         <label>MSN</label>
	         <input type="text" name="${field.name}" value="${field.value}"/>
	      </p>
	      #{/field}
	      <p>
	         <label>校验码（单击可刷新） *</label><img src="@{Application.captcha(randomID)}" title="单击刷新验证码" id="captcha"/>
	         <input type="text" name="code" id="code" size="18" value="" />
	      </p>
	      <input type="hidden" id="randomID" name="randomID" value="${randomID}" />
	      <button type="submit">注册</button>
	   </fieldset>
	#{/form}
<script>
	//为校验码图片增加事件
	$("#captcha").click(function(){
		获取新的唯一随机数后，回调函数
		$.post("@{TestViewer.shuaXinYanZhengMa()}", function(randomID) {
			刷新校验码图片
  			$("#captcha").attr("src","@{Application.captcha()}?"+"id="+randomID);
  			重设唯一随机数
  			$("#randomID").attr("value",randomID)
		});
	})
	// 初始化校验器validator并添加一个定制的表单提交逻辑
	$("#myform").validator({ lang: 'cn' }).submit(function(e) {
		var form = $(this);
		var isTrue = false;
		// 如果客户端校验没问题
		if (!e.isDefaultPrevented()) {
			// 进行服务器端校验
			$.getJSON("@{TestViewer.zhuCeJianCha()}?" + form.serialize(),
				function(json) {//回调函数
					if(json==true){//登录成功返回“true”，跳转到主页
						location.href="@{TestViewer.zhuCeYongHu()}?" + form.serialize();
					}else{//否则登录失败，提示错误
						//遍历json对象，如果存在空的属性就删除掉，以免显示空白的错误信息
						for(var key in json){
							try{
								var value = eval("json['" +  key +"']");
								if(value==""){
									delete json[key];
								}
							}catch(ex){}
						}
						form.data("validator").invalidate(json);
					}
			});
			e.preventDefault();
		}
	});
</script>
#{/wei_deng_lu}